<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>添加影院</title>
  <style>
    h1{
        text-align: center;
    }
   .list {
      margin: auto 100px;
    }

   .list .item {
      margin-top: 20px;
    }

   .list .item span {
      width: 80px;
      flex-shrink: 0;
    }
  </style>
</head>

<body>
  <header>
    <h1>添加影院</h1>
  </header>
  <div class="list">
    <div class="item">
      <span>影院名称：</span>
      <input type="text" id="cinema-name" class="form-control" placeholder="请输入影院名称">
    </div>
    <div class="item">
      <span>影院地址：</span>
      <input type="text" id="addr" class="form-control" placeholder="请输入影院地址">
    </div>
    <div class="item">
      <span>影院消费：</span>
      <input type="text" id="consumption" class="form-control" placeholder="请输入影院消费">
    </div>
    <div class="item">
      <span>影院距离：</span>
      <input type="text" id="distance" class="form-control" placeholder="请输入距离">
    </div>
    <!-- 添加提交按钮 -->
    <div class="item">
      <button id="cancel" class="btn-secondary active">取消</button>
      <button id="submit" class="btn-primary">提交</button>
    </div>
  </div>

  <script src="../js/axios.js"></script>
  <script>
    // 假设 baseUrl 是你的基础 API 地址
    var baseUrl = 'http://localhost:3009';
    const cancel = document.querySelector('#cancel');
    cancel.addEventListener('click',()=>{
        history.back();
    })
    // 获取提交按钮元素
    const submitButton = document.getElementById('submit');

    // 为提交按钮添加点击事件监听器
    submitButton.addEventListener('click', async () => {
      try {
        // 获取输入框和选择框的值
        const cinema = document.getElementById('cinema-name').value;
        const addr = document.getElementById('addr').value;
        const consumption = document.getElementById('consumption').value;
        const distance = document.getElementById('distance').value;

        // 构建要发送的数据对象
        const data = {
            cinema,
            addr,
            consumption,
            distance,
        };

        // 发起 Axios POST 请求
        await axios.post(baseUrl + '/cinema/add', data);

        // 提示添加成功
        alert('添加成功');
        history.back();
      } catch (error) {
        // 处理请求错误
        console.error('请求出错:', error);
        alert('添加失败，请稍后重试');
      }
    });
  </script>
</body>

</html>